<template>
  <div>
    <header>
      <span @click="$router.back()">返回</span>
      <section>购物车</section>
      <span></span>
    </header>
    <van-swipe-cell v-for="(item, index) in goodsList" :key="index">
      <section class="content">
        <img :src="item.url" alt="" />
        <div>
          <h5>{{ item.title }}</h5>
          <p>￥{{ item.price }} <span>X{{item.buyNum}}</span></p>
        </div>
      </section>
      <template #right>
        <van-button square type="danger" text="删除" @click="$store.commit('del',index)"/>
        <van-button square type="primary" text="加一" @click="item.buyNum++"/>
      </template>
    </van-swipe-cell>
    <van-submit-bar :price="allPrice" :button-text="'数量'+allNum" />
  </div>
</template>
<script>
import { useStore } from "vuex";
import { computed } from "vue";
export default {
  setup(props) {
    const { state } = useStore();
    const goodsList = computed(() => state.cartList);
    const allPrice = computed(() => { // 总价
      let price = 0;
      state.cartList.forEach(item => {
        price+= item.price*item.buyNum
      })
      return price*100;
    })
    const allNum = computed(() => { // 总数
      let num = 0;
      state.cartList.forEach(item => {
        num+= item.buyNum
      })
      return num;
    })
    return {
      goodsList,
      allPrice,
      allNum
    };
  },
};
</script>

<style lang="scss" scoped>
header {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  span {
    width: 80px;
    text-align: center;
  }
  section {
    flex: 1;
    text-align: center;
  }
}
.content{
   padding: 10px;
  display: flex;
  img{
    width: 100px;
  }
  div{
    flex: 1;
    display: inline-flex;
    flex-wrap: wrap;
    align-content: space-between;
    p{
        width: 100%;
        span{
          float: right;
        }
    }
    
  }
}
// deep 使样式不受 scoped 的影响
:deep(.van-button) {
    height: 100%;
 }
</style>
